<!-- 订单详情 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label mb10">订购信息</p>
        <div class="dfdsretxdftrt mt10">
            <div>
                订单编号:{{ ret.deductionOrderId }}

            </div>
            <div>

                订购编号:{{ ret.cardId }}
            </div>
            <div>
                创建时间:{{ ret.gmtCreate }}

            </div>
            <div>
                订单类型:{{ kjdfdsfxsr(ret.deductionOrderType) }}

            </div>
            <div>

                订单状态:{{ kjdfdsf(ret.deductionStatus) }}
            </div>

            <div>
                商品名称: {{ kap.name }}

            </div>
            <div>
                用户名称: {{ kap.userName }}

            </div>
            <div>
                用户uid:{{ kap.userId }}
            </div>
            <div>









            </div>
            <!-- <div>
                订购类型: 周卡

            </div> -->
        </div>


        <n-tabs type="line" animated class="mt20">
            <!-- <n-tab-pane name="扣款信息" tab="扣款信息">
                
              

            </n-tab-pane> -->
            <n-tab-pane name="费用信息集合" tab="费用信息集合">
                <div class="zxczxcrt">
                    <n-data-table :border="true" :columns="lycolumns" :data="ret.billFeeInfoList" :bordered="false" />
                </div>
            </n-tab-pane>

        </n-tabs>


    </div>
</template>
<script lang='ts' setup>
import { dxget, hf, qurl, callBack, dxpost } from "../../util/index";
import { ref, render, h } from 'vue'
import { apiUrl } from "../../util/config";
const cz = qurl()
const ret = ref({})
const kap = ref({})
let jcfdsfs = [
    { label: '收单手续费', value: 'TRANSACTION_FEE' },
    { label: '技术服务费', value: 'AXF_SERVICE_FEE' },
    { label: 'CPS费用', value: 'CPS_FEE' },
    { label: '代运营费用', value: 'AGENT_ISV_FEE' },
    { label: '代开发费用', value: 'SAAS_ISV_FEE' },
    { label: '供应商费用', value: 'SUPPLIER_ROLE_FEE' },
    { label: '物流商费用', value: 'BRANCH_ROLE_FEE' },
    { label: '渠道商费用', value: 'CHANNEL_PROVIDER_ROLE_FEE' },
    { label: '总部费用', value: 'HQ_ROLE_FEE' },
    { label: '门店费用', value: 'SHOP_ROLE' },
]
let jcfdsfsB = [
    { label: "核销扣款单", value: "USE_DEDUCTION" },
    { label: "追优惠扣款单", value: "DISCOUNT_DEDUCTION" },

]
let jcfdsfsxwer = [
    { label: "全部", value: "" },
    { label: "待支付", value: "UNPAID" },
    { label: "支付成功", value: "PAYMENT_SUCCESS" },
    { label: "支付失败", value: "PAYMENT_FAILED" },
    { label: "已退款", value: "REFUND" },

]

const lycolumns = ref(
    [
        {
            title: '收费类型', key: 'commissionType', align: "center",
            render(row) {
                return jcfdsfs.filter(a => a.value == row.commissionType)[0].label
            }
        },

        {
            title: '收费金额', key: 'commissionCash', align: "center",

            render(row) {
                if (row.commissionCash) {
                    return h('div', { class: 'dfsfsdrtrt' }, row.commissionCash / 1000)
                } else {
                    return '--'
                }

            }
        },
        { title: '收费方名称', key: 'commissionPidName', align: "center" },
        { title: '收费日期	', key: 'commissionTime', align: "center" },
        { title: '费用退款时间	', key: 'commissionRefundTime', align: "center" },


        {
            title: '费用退款金额	', key: 'commissionRefundCash', align: "center",
            render(row) {
                if (row.commissionRefundCash) {
                    return h('div', { class: 'dfsfsdrtrt' }, row.commissionRefundCash / 1000)
                } else {
                    return '--'
                }
                
            }
        },

        {
            title: '收费比例	', key: 'commissionRate', align: "center",

            render(row) {
                if (!row.commissionRate) {
                    return '--'
                }
                try {
                    return parseFloat(row.commissionRate).toFixed(2) + '%'
                } catch (e) {
                    return '--'
                }
            }

        },



    ]
)
const init = async () => {
    const { data } = await dxget('meirong/wantu/deductionorderquery', {
        deduction_order_id: cz.deduction_order_id,
        cardId: cz.cardId,
        userId: cz.userId,
        openId: cz.openId
    })
    ret.value = data.deductionOrderInfo
    console.log(data);
}
init()


const merchantcardquery = async () => {
    const { data } = await dxget('meirong/wantu/merchantcardquery', {
        cardId: cz.cardId,
        userId: cz.userId,
        openId: cz.openId
    })
    kap.value = data.cardOrderInfo
    console.log(data);
}
merchantcardquery()

const kjdfdsf = (row) => {
    let kjdfds = jcfdsfsxwer.filter(a => a.value == row)[0].label
    return kjdfds
}
const kjdfdsfxsr = (data) => {
    let kjdfds = jcfdsfsB.filter(a => a.value == data)[0].label
    return kjdfds
}
</script>
<style scoped>
.dfdsretxdftrt {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
</style>